<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房屋图片管理</el-breadcrumb-item>
      <el-breadcrumb-item>图片列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 面板 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="16">
          <!-- 输入字段和搜索按钮 -->
          <!-- <el-input placeholder="请输入内容"><el-button slot="append" icon='el-icon-search'></el-button></el-input> -->
        </el-col>
        <el-col :span="4">
          <!-- 添加图片按钮 -->
          <el-button @click="addbox = true" type="primary">添加图片</el-button>
        </el-col>
      </el-row>

      <!-- 图片表格 -->
      <el-table :data="imgList.records" border stripe>
        <el-table-column prop="id" label="序号" sorter></el-table-column>
        <el-table-column prop="imgUrl" label="房屋图片">
          <!-- 图片标签样式显示 -->
          <template slot-scope="scope">
            <el-image style="width: 110px; height: 80px" :src="scope.row.imgUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="hid" label="房屋id"></el-table-column>
        <el-table-column label="操作">
          <!-- 操作按钮 -->
          <template slot-scope="scope">
            <el-button @click="showEdit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
            <el-button @click="showDel(scope.row.id)" size="mini" type="danger" icon='el-icon-delete'></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
       :current-page="page.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-card>

    <!-- 新增房屋图片框  -->
     <el-dialog title="新增房屋图片" :visible.sync="addbox">
      <el-form  >
        <el-form-item label="房屋图片" >
          <el-upload action="#" ref="mYupload" list-type="picture-card" :on-remove="handleRemove" :http-request="customUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="房屋id" >
          <el-input v-model="imginfoAdd.hid"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="addImg" type="primary">确 定</el-button>
      </div>
      </el-dialog>

      <!-- 修改用户框  -->
     <el-dialog title="修改房屋图片" :visible.sync="editbox">
      <el-form>
        <el-form-item label="修改房屋图片" >
          <el-upload action="#" ref="mYupload" clearFiles list-type="picture-card" :on-remove="updHandleRemove" :http-request="updCustomUpload">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="原图片预览" >
          <el-image style="width: 110px; height: 80px" :src="previewImage" id="yourFileInputId"></el-image>
        </el-form-item>
        <el-form-item label="房屋id" >
          <el-input v-model="imginfoUpd.hid"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="updateimg" type="primary">确 定</el-button>
      </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return{
      imgList: [], // 初始化图片列表为空
      total: 0, // 多少条数据
      page: {
        pageNum: 1,
        pageSize: 5
      },
      editbox: false,  //显示修改框
      addbox: false ,  //显示新增框
      // 获取添加数据
      imginfoAdd:{
        file:[],
        hid:''
      },
      //获取修改房屋图片
      updfile:null,
      imginfoUpd:{
        id:'',
        hid:''
      },
      previewImage:null
    }
  },
  created() {
    this.getimgList();
    document.title="房屋图片列表"
  },
  methods: {
    async showDel(id){
      let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('你取消了删除')
        }
        let ret=await this.$http.delete(`/admin/imginfo/delete/${id}`);
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message)
        this.getimgList();
    },
    //更新房屋图片
    async updateimg(){
      let formData = new FormData();
      formData.append("imgInfo", JSON.stringify(this.imginfoUpd)); // 正确使用 formData
      formData.append("file", this.updfile);
      console.log("sa", this.file);
      let ret = await this.$http.put('/admin/imginfo/upd', formData,)
      this.editbox=false;
      this.$refs['mYupload'].clearFiles();
      this.updfile=null;
      if(ret.code != 200){
           return this.$message.error(ret.message);
      }
      this.$message.success(ret.message)
      this.getimgList();
    },
    //获取修改数据
    showEdit(row){
      this.editbox=true;
      this.imginfoUpd.id=row.id;
      this.imginfoUpd.hid=row.hid;
      this.previewImage=row.imgUrl
    },
    // 更新删除图片
    updHandleRemove(file, fileList) {
      console.log(this.file);
    },
    // 更新获取房屋图片
    updCustomUpload(file){
      this.updfile=file.file;
    },
    //添加房屋图片
    async addImg(){
      const formData = new FormData();
      this.imginfoAdd.file.forEach((file) => {
        formData.append("file", file); // 使用相同的键名 "file"
      });
      formData.append("hid", this.imginfoAdd.hid);
      let ret = await this.$http.post('/admin/imginfo/upload',formData);
      this.$refs['mYupload'].clearFiles();
      this.addbox=false;
      if(ret.code != 200){
           return this.$message.error(ret.message)
      }
      this.$message.success(ret.message)
      this.getimgList();
    },
    // 删除图片
    handleRemove(file, fileList) {
      console.log(this.file);
    },
    //获取房屋图片
    customUpload(file){
      this.imginfoAdd.file.push(file.file);
    },
    //查询
    async getimgList() {
      let ret = await this.$http.get('/admin/imginfo/selectAll', { params: this.page });
      this.imgList = ret.data;
      this.total = ret.data.total;
      console.log(ret);
    },
    handleSizeChange(size){
       //  console.log('变化每页条数',size);
       this.page.pageSize = size 
       this.getimgList();  //刷新
      },
    handleCurrentChange(p){
       //  console.log('变化页码',p);
       this.page.pageNum = p 
       this.getimgList();  //刷新
      },
  }
}
</script>

<style>

</style>